<template>
    <div class="ml-16px mr-16px mb-16px pt-26px content-container">
        <div class="pl-26px pr-26px pb-26px words-container">
            <div class="flex items-center pl-36px pt-26px -mt-26px -ml-26px text-14px font-bold level-2-title">
                预设组合
            </div>
            <div class="mt-10px">
                <div class="combination-checkbox">
                    <div class="custom-checkbox-group flex-wrap">
                        <el-checkbox-group v-model="ruleForm.combinationOptions"
                            class="flex !flex-row flex-wrap w-full">
                            <div class="flex items-center w-25%" v-for="item in ruleForm.combinations" :key="item.ID">
                                <el-checkbox :value="item.ID" @change="handleChange(item.ID)"></el-checkbox>
                                <label class="custom-checkbox" @click="handleChecked(item.ID)">
                                    <span class="custom-checkbox-label" :style="{ color: item.FontColor }">
                                        {{ item.Presets }} <span v-if="item.Count">({{ item.Count }})</span>
                                    </span>
                                </label>
                                <el-button link class="ml-10px" v-if="item.Count"
                                    @click="handleView(item)">查看</el-button>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
        </div>

        <CombinationWordDialog v-if="state.isCombinationDialog"
            v-model:CombinationWordDialog="state.isCombinationDialog" :title="state.dialogTitle" :id="state.id"
            :combinations="state.combinations" :checkCombinationOptions="ruleForm.checkCombinationOptions" @closeDialog="state.isCombinationDialog = false" @checked="handleCheck" />
    </div>
</template>

<script setup lang="ts">
import CombinationWordDialog from './CombinationWordDialog.vue'
import { getCombinationWordsApi } from '@/api/whiteList/index'

const props = defineProps<{
    ruleForm: any
}>()

const state = reactive({
    isCombinationDialog: false,
    combinations: [],
    dialogTitle: '',
    id:0,
    loading: false,
})

function handleChecked(id: number) {
    if (props.ruleForm.combinationOptions.includes(id)) {
        // 选中状态，取消选中
        props.ruleForm.combinationOptions = props.ruleForm.combinationOptions.filter((item: number) => item !== id)
    } else {
        // 未选中状态，选中
        props.ruleForm.combinationOptions.push(id)
        state.id = id
    }
}

function handleChange(id: number) {
    state.id = id
}

function formatMainWords(words: any) {
    let mainWords = ''
    if (words.length === 0) {
        return mainWords
    } else if (words.length === 1) {
        return words[0].label
    } else {
        words.forEach((word: any) => {
            mainWords += word.label + '/'
        })
        return mainWords.slice(0, -1)
    }

}

async function handleView(word: any) {
    state.id = word.ID
    const res: ResType = await getCombinationWordsApi({
        id: word.ID,
        keyword: formatMainWords(props.ruleForm.mainWords),
        region: props.ruleForm.area
    })
    if (res.code === 200) {
        state.combinations = res.data
        state.dialogTitle = `查看组合词 - ${word.Presets}`
        state.isCombinationDialog = true
    }
}

function handleCheck(options: any) {
    options.forEach((item: any) => {
        if (!props.ruleForm.checkCombinationOptions.includes(item)) {
            props.ruleForm.checkCombinationOptions.push(item)
        }
    });
}
</script>

<style scoped>
:deep(.el-radio) {
    margin-right: 0 !important;
    width: 25%;
}

:deep(.el-checkbox) {
    margin-right: 0 !important;
}

.custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 32px;
}

.custom-checkbox-label {
    font-size: 14px;
}
</style>